<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    
    <div  @click="view">pptx预览</div>
    <div  @click="viewTest">pptx预览无iframe</div>

    <div>
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="value"
        label="时间选择"
        placeholder="点击选择时间"
        @click="showPicker = true"
        />
      <van-popup v-model="showPicker" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>
    <van-button type="primary" @click="goPage">跳转页面</van-button>
    <van-dialog v-model="showFlag" title="标题" show-cancel-button width="95%">
      <div class="container">
        <div class="content">
          <iframe class="iframeClass" :src="href" ></iframe>
        </div>
      </div>
      
    </van-dialog>

    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup v-model="showContent" position="bottom"  :style="{height:'30%'}">
      <van-button type="primary" @click="getToast">弹出提示</van-button>
    </van-popup>

    <div class="listContent">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item" :title="item" />
      </van-list>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { Toast } from 'vant';
import moment from 'moment'
import 'moment-cn'
// import LunarCalendar  from 'lunar-calendar'
import { getLunar } from 'chinese-lunar-calendar'
import {sloarToLunar} from '../utils/lunar-calendar'


export default {
  name: 'HomeView',
  components: {
    // HelloWorld
  },
  data(){
    return{
      value: '',
      currentDate:new Date(),
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      showPicker: false,
      list: [1,2,3,4,5,6,7,8,9,10],
      arr:[],
      loading: false,
      finished: false,
      showFlag:false,
      showContent:false,
      href:'https://ydzysit.chinapost-life.com/v1//activity/api/subActivity/readActivityImage/M1'
    }//https://view.officeapps.live.com/op/view.aspx?src=
  },
  beforeRouteEnter(to,from,next){
    console.log(to,from,'kkkkk')
    next((vm)=>{
      if(from.name=='canvasTest'){
        let oldData=JSON.parse(localStorage.getItem('oldData')) ;
        Object.assign(vm.$data,oldData);
        console.log('old',oldData)
      }
    })
   
    next()
  },
  mounted(){
    // console.log('页面初始化',ChineseLunarCalendar.solarToLunar(new Date()))
    // this.value=this.$moment().add(1,'days').format('YYYY-MM-DD');
    // let tomorrow=new Date(new Date());
    // tomorrow.setDate(tomorrow.getDate()+1);
    // this.currentDate=tomorrow;
    // this.minDate=tomorrow;
    // // this.maxDate=new Date(2050,10,1)
    // console.log(this.minDate,this.maxDate,new Date(2050,0,1))
    [
      {
        fileUrl:'https://xxxxx',
        fileType:'pptx'
      }
    ]
    this.getLunar();
  },
  methods:{
    //获取农历
    getLunar() {
      let time=new Date('2024-04-8')
        // let data = getLunar(new Date().getFullYear(), (new Date().getMonth() + 1), new Date().getDate());
        let data = getLunar(time.getFullYear(), (time.getMonth() + 1), time.getDate());
        console.log(data);
        let lunarData=sloarToLunar(2024, 4, 8).lunarYear +
        "年" +
        sloarToLunar(2024, 4, 8).lunarMonth +
        "月" +
        sloarToLunar(2024, 4, 8).lunarDay
        console.log('lunarData',lunarData,'阴历',sloarToLunar(2024, 5, 1))
    },

    getToast(){
      this.$toast('提示信息',{
        className: 'my-toast',
        duration: 20000
      })
    },
    showPopup(){
      this.showContent=true;
    },
    goPage(){
      localStorage.setItem('oldData',JSON.stringify(this.$data) )
      this.$router.push('/canvasTest')
    },
    onConfirm(time) {
      this.value =this.$moment(time).format('YYYY-MM-DD');
      console.log(this.value,'kljkljk')
      this.showPicker = false;
    },
    view(){
      this.showFlag=true;
    },
    viewTest(){
      window.location.href=this.href
    },
    onLoad() {
      console.log('eeee')
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
  }
}
</script>
<style scoped>
.container{
  width:100%;
  height:500px;
  overflow: auto;
  padding:20px;
}
.content{
  width:800px;
  height:600px;
  overflow: auto;
  padding:50px;
  border:1px solid red;
  /* margin:20px; */
}
.iframeClass{
  /* overflow: auto; */
  width:700px;
  height:500px;
}

</style>
<style>
.my-toast{
  /* z-index:9999!important; */
  background:red;
}
</style>
